<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Swiper</title>
</head>
<body>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    #Swiper{
        width: 960px;
        height: 590px;
        border: 2px #ccc solid;
        position: relative;
    }

    #Swiper a{
        text-decoration: none;
    }

    #Swiper #header{
        height: 50px;
    }

    #Swiper #header ul li{
        list-style-type: none;
        float: left;
        width: 104px;
        border-right: 3px solid #cccccc;
        line-height: 50px;
        text-align: center;
    }

    #Swiper #header ul li.active{
        background-color: #00aafa;
    }

    #Swiper #header ul li:last-child{
        border: none;
    }

    #Swiper .gdmv{
        display: none;
        /*background-size: cover;*/
    }

    #Swiper .gdmv.active{
        display: block;
        height: 100%;
        width: 100%;
    }

    #Swiper #title{
        position: absolute;
        bottom: 0px;
    }

    #Swiper #title .t{
        display: none;
        height: 40px;
        background: rgba(10, 10, 10, 0.3);
        width: 950px;
        line-height: 40px;
        padding-left: 10px;
    }

    #Swiper #title .t.active{
        display: block;
    }

    #Swiper #title a{
        color: snow;
    }

    #Swiper #title a:hover{
        text-decoration: underline;
        background-color: #666666;
    }

    #Swiper #cycle{
        position: absolute;
        bottom: 0px;
        right: 10px;
        height: 40px;
        background-color: #00aafa;
    }
    #Swiper #cycle div{
        height: 16px;
        width: 16px;
        background: rgba(120,120,120,0.9);
        float: left;
        border-radius: 50%;
        margin-right: 10px;
        margin-top: 12px;
    }
    #Swiper #cycle div.active{
        background: rgba(255,255,255,0.8);
    }

</style>
<div id="Swiper">
    <div id="header">
        <ul>
            <li class="active">壹<a href=""></a></li>
            <li><a href="">贰</a></li>
            <li><a href="">叁</a></li>
            <li><a href="">肆</a></li>
            <li><a href="">伍</a></li>
            <li><a href="">陆</a></li>
            <li><a href="">柒</a></li>
            <li><a href="">捌</a></li>
            <li><a href="">玖</a></li>

        </ul>
    </div>
    <div id="imgs">
        <div class="gdmv active"><a href=""><img src="./images/gdmv01.jpg" alt=""></a></div>
        <div class="gdmv"><a href=""><img src="./images/gdmv02.jpg" alt=""></a></div>
        <div class="gdmv"><a href=""><img src="./images/gdmv03.jpg" alt=""></a></div>
        <div class="gdmv"><a href=""><img src="./images/gdmv04.jpg" alt=""></a></div>
        <div class="gdmv"><a href=""><img src="./images/gdmv05.jpg" alt=""></a></div>
        <div class="gdmv"><a href=""><img src="./images/gdmv06.jpg" alt=""></a></div>
        <div class="gdmv"><a href=""><img src="./images/gdmv07.jpg" alt=""></a></div>
        <div class="gdmv"><a href=""><img src="./images/gdmv08.jpg" alt=""></a></div>
        <div class="gdmv"><a href=""><img src="./images/gdmv09.jpg" alt=""></a></div>
    </div>
    <div id="title">
        <div class="t active"><a href="">图一的标题</a></div>
        <div class="t"><a href="">图二的标题</a></div>
        <div class="t"><a href="">图三的标题</a></div>
        <div class="t"><a href="">图四的标题</a></div>
        <div class="t"><a href="">图五的标题</a></div>
        <div class="t"><a href="">图六的标题</a></div>
        <div class="t"><a href="">图七的标题</a></div>
        <div class="t"><a href="">图八的标题</a></div>
        <div class="t"><a href="">图九的标题</a></div>
    </div>
    <div id="cycle">
        <div class="active"></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
<script>
    var imgs = document.querySelectorAll('#imgs div');
    var cycle = document.querySelectorAll('#cycle div');
    var title = document.querySelectorAll('#title div');
    var header = document.querySelectorAll('#header li');
    var XH = setInterval(function () {
        var index = getIndex();
        var next = index + 1;
        // imgs[index].classList.remove('active');
        // imgs[nextPicture].classList.add('active');
        if(next > 8){
            next = 0;
        }
        GD(index, next);
    },3000);

    var DD = document.getElementById('cycle');

    DD.addEventListener('mouseover', Ting);
    function Ting(e) {
        var point = e.target;
        //当点到小圆点的时候
        if(point.getAttribute('id') != 'cycle'){
            var num = overObj(point, cycle);
            var current = getIndex();
            GD(current, num);
            clearInterval(XH);
        }
    }

    DD.addEventListener('mouseout', KS);
    function KS(e) {
        var point = e.target;
        if(point.getAttribute('id') != 'cycle'){
            XH = setInterval(function () {
                var index = getIndex();
                var next = index + 1;
                if(next > 8){
                    next = 0;
                }
                GD(index, next);
            }, 3000)
        }
    }

    function GD(index, next) {
        imgs[index].classList.remove('active');
        imgs[next].classList.add('active');

        cycle[index].classList.remove('active');
        cycle[next].classList.add('active');

        title[index].classList.remove('active');
        title[next].classList.add('active');

        header[index].classList.remove('active');
        header[next].classList.add('active');
    }

    function overObj(obj, Objects) {

        for (var i = 0; i < Objects.length; i++) {
            if (obj == Objects[i]){
                return i;
            }
        }
    }

    /**
     * 获取当前图片的显示状态
     * @returns {number}
     */
    function getIndex() {
        for (var i = 0; i < imgs.length; i++) {
            if(imgs[i].classList.contains('active')){
                // console.log(i);
                return i;
            }
        }
    }
</script>
</body>
</html>